<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
    <title>My JSP 'index.jsp' starting page</title>
    <link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
	<link rel="stylesheet" href="css/jquery-ui-1.8.21.custom.css" type="text/css" />
	
	<style>
   	html, body {
   		margin: 0;
		padding: 0
   	}
    </style>
  </head>
  
  <body >
  
  
  <!--
  <div  style="width:960px;margin:0 auto;text-align:center;">
	  <c:if test="${'cluo' eq task}">
	  <p>
	  克里斯蒂亚诺·罗纳尔多(葡萄牙语：Cristiano Ronaldo)，简称“C-罗纳尔多”或“C罗”，是一名葡萄牙足球运动员，现效力于西甲豪门皇家马德里队，同时也是葡萄牙国家队的队长。18岁加入英超曼联，6年来为曼联赢得众多主要赛事荣誉，也获得不少个人荣誉，其中在2007-08年赛季，个人攻入42球，超越了曼联前中场乔治·贝斯特的纪录，荣膺欧洲金球奖和世界足球先生，是首位在英超诞生的世界足球先生。2009年6月，以9400万欧元从曼联转会至皇家马德里，成为足球史上身价第一高的球员，被评为皇家马德里历史最佳阵容的成员之一。
	  </p>
	  </c:if>
	  
	  <c:if test="${'messi' eq task}">
	  <p>
	 里奥内尔·安德雷斯·梅西（Lionel Andrés Messi），生于1987年6月24日，是一名阿根廷足球运动员，司职前锋同时可以兼任攻击型中场，现效力于巴塞罗那，他被大众称为“新马拉多纳”。2009年12月22日，梅西凭借着08-09赛季带领巴萨取得史无前例的六冠王，荣膺2009年金球奖及世界足球先生。2011年1月11日，荣获2010年国际足联金球奖，并在2012年1月9日蝉联2011年国际足联金球奖。梅西代表阿根廷参加了2006、2010两届世界杯，2007、2011两届美洲杯，以及2008年北京奥运会。
	  </p>
	  </c:if>
	  
	  <c:if test="${'beckham' eq task}">
	  <p>
	  David Robert Joseph Beckham （译：大卫·罗伯特·约瑟夫·贝克汉姆），OBE是一名英格兰足球运动员，前任英格兰代表队队长，目前效力于美国洛杉矶银河。曾于1999年及2001年夺得世界足球先生亚军，是运动品牌阿迪达斯的代言人。贝克汉姆在球场上司职右前卫或中前卫，最著名的是他右脚精准的长传、传中和极其出色的定位球，在俱乐部和国家队生涯中都以此获得了大量助攻和进球。南非世界杯英格兰出局后，英国媒体力挺贝克汉姆出任国家队主教练，他本人也表示愿意执教英格兰队，但条件还未成熟，他目前仍然非常支持卡佩罗留任。
	  </p>
	  </c:if>
	  <input type="button" value="返回" id="back" class="btn btn-primary btn-large"/>
	   </div> 
	  
	   <div class="demo">

		<div id="dialog" title="Basic dialog">
			<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
		</div>
		
		<button id="opener">Open Dialog</button>
		
	</div>
	
	  -->
	<div class="demo">

		<img src="img/cluo.jpg" />
		<img src="img/messi.jpg" />
		<img src="img/beckham.jpg" />
		
		
	</div><!-- End demo -->
	

  
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
	  $.fx.speeds._default = 1000;
	  $( "#dialog" ).dialog({
			autoOpen: false,
			show: "blind",
			hide: "explode"
		});

		$( "#opener" ).click(function() {
			$( "#dialog" ).dialog( "open" );
			return false;
		});

		
		$("#back").click(function(){
			history.back();
		});


		//--------------------------------
		$.fn.position2 = function( options ) {
			return this.position( $.extend({
				of: window,
				using: function( to ) {
					$( this ).css({
						top: to.top,
						left: to.left
					})
				},
				collision: "none"
			}, options));
		}

		$.fn.left = function( using ) {
			return this.position2({
				my: "right middle",
				at: "left middle",
				offset: "25 0",
				using: using
			});
		}
		$.fn.right = function( using ) {
			return this.position2({
				my: "left middle",
				at: "right middle",
				offset: "-25 0",
				using: using
			});
		}
		$.fn.center = function( using ) {
			return this.position2({
				my: "center middle",
				at: "center middle",
				using: using
			});
		};

		$( "img:eq(0)" ).left();
		$( "img:eq(1)" ).center();
		$( "img:eq(2)" ).right();

		$( "body" ).css({
			overflow: "hidden"
		})
		$( ".demo" ).css({
			position: "relative",
		});
		$( ".demo img" ).css({
			position: "absolute",
		});

		function animate( to ) {
			$(this).animate( to );
		}
		function next() {
			$( "img:eq(2)" ).center( animate );
			$( "img:eq(1)" ).left( animate )
			$( "img:eq(0)" ).right().appendTo( ".demo" );
		}
		function previous() {
			$( "img:eq(0)" ).center( animate );
			$( "img:eq(1)" ).right( animate );
			$( "img:eq(2)" ).left().prependTo( ".demo" );
		}
		$( "#previous" ).click( previous );
		$( "#next" ).click( next );

		$( ".demo img" ).click(function() {
			$( ".demo img" ).index( this ) === 0 ? previous() : next();
		});

		$( window ).resize(function() {
			$( "img:eq(0)" ).left( animate );
			$( "img:eq(1)" ).center( animate );
			$( "img:eq(2)" ).right( animate );
		});
		
	});
  
  </script>
  </body>
</html>
